<template>
  <div class="chart-container">
    <h2 class="section-title">2025年各省快递量统计</h2>
    <div ref="chartContainer" class="chart-wrapper"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

// 修改为只展示一线城市数据
const provinceData = [
  { name: '北京', value: 120 },
  { name: '上海', value: 145 },
  { name: '广州', value: 135 },
  { name: '深圳', value: 128 }
];

// 生成去年的对比数据 (假设同比增长10%-30%)
const lastYearData = provinceData.map(item => ({
  name: item.name,
  value: Math.round(item.value * (0.7 + Math.random() * 0.3))
}));

onMounted(() => {
  if (!chartContainer.value) return;
  
  // 确保容器有尺寸后再初始化图表
  chart = echarts.init(chartContainer.value);
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params: any[]) => {
        let tooltip = `${params[0].name}<br/>`;
        params.forEach(param => {
          const seriesName = param.seriesName;
          const value = param.value;
          tooltip += `${seriesName}: ${value}万件<br/>`;
        });
        return tooltip;
      }
    },
    legend: {
      data: ['2024年', '2025年'],
      textStyle: {
        color: '#94a3b8'
      },
      top: '5%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#94a3b8'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(148, 163, 184, 0.2)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: provinceData.map(item => item.name),
      axisLabel: {
        color: '#94a3b8'
      }
    },
    series: [
      {
        name: '2024年',
        type: 'bar',
        barGap: 0,
        barWidth: '40%',
        data: lastYearData.map(item => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#4c7bff' },
            { offset: 1, color: '#6e4ff5' }
          ]),
          borderRadius: [0, 8, 8, 0]
        },
        label: {
          show: true,
          position: 'right',
          color: '#94a3b8',
          formatter: '{c}万'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(108, 78, 245, 0.5)'
          }
        }
      },
      {
        name: '2025年',
        type: 'bar',
        barWidth: '40%',
        data: provinceData.map(item => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#60a5fa' },
            { offset: 1, color: '#38bdf8' }
          ]),
          borderRadius: [0, 8, 8, 0]
        },
        label: {
          show: true,
          position: 'right',
          color: '#e2e8f0',
          formatter: '{c}万'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(56, 189, 248, 0.5)'
          }
        }
      }
    ]
  };
  
  chart.setOption(option);
  
  // 添加响应式处理
  const handleResize = () => {
    chart?.resize();
  };
  
  window.addEventListener('resize', handleResize);
  
  // 组件销毁时清理事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
  });
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
});
</script>

<style scoped>
.chart-container {
  background: transparent;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(94, 115, 153, 0.3);
}

.section-title {
  color: #60a5fa;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

.chart-wrapper {
  width: 100%;
  height: calc(100% - 40px);
  min-height: 300px; /* 添加最小高度确保图表可见 */
}
</style>